<template>
  <div>
    <div>
      <!-- <el-button @click="goBack()">返回</el-button> -->
    </div>
    <div v-if="statea" style="width: 90%; margin-left: 5%; padding-top: 20px">
      <el-descriptions :column="4" :title="langs.page.customer + '信息'">
        <template slot="extra">
          <el-button size="small" type="primary" @click="goBack()">
            返回
          </el-button>
        </template>
        <el-descriptions-item
          :label="langs.page.customer + '姓名'"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">
            {{ dataList.customer.customer_name || '' }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="手机号"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">
            {{ dataList.customer.tel || '' }}
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <el-descriptions :column="4" :title="langs.page.customer + '资料'">
          <template slot="extra">
            <!-- <el-button size="small" type="primary" @click="customer">
              修改
            </el-button> -->
          </template>
          <el-descriptions-item
            label="姓名"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">
              {{ dataList.customer.customer_name || '' }}
            </div>
          </el-descriptions-item>

          <el-descriptions-item
            label="手机号"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">
              {{ dataList.customer.tel || '' }}
            </div>
          </el-descriptions-item>
          <!-- <el-descriptions-item
            label="地区"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">山东省青岛市市北区</div>
          </el-descriptions-item> -->
        </el-descriptions>
      </div>

      <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <h3 style="color: #303133">
          {{ langs.page.member + '信息' }}
        </h3>
        <el-descriptions
          v-for="(item, index) in dataList.customer_member"
          :key="index"
          :colon="false"
          :column="4"
        >
          <el-descriptions-item
            label="姓名"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">{{ item.nick_name }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="出生日期"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">{{ item.birthday }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="性别"
            :label-style="{ 'font-size': '16px' }"
          >
            <div v-if="item.gender == 'male'" style="font-size: 15px">男</div>
            <div v-else style="font-size: 15px">女</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <el-descriptions title="标签信息">
          <template slot="extra">
            <!-- <el-button size="small" type="primary">修改</el-button> -->
          </template>
          <el-empty :image-size="200" />
        </el-descriptions>
      </div>
      <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <el-descriptions
          class="margin-top"
          :colon="false"
          direction="vertical"
          title="资产信息"
        >
          <template slot="extra">
            <el-button
              v-permissions="{ permission: ['mv:CustomerArchives'] }"
              size="small"
              type="primary"
              @click="pass()"
            >
              转赠
            </el-button>
          </template>
          <!-- <template slot="extra">
            <el-button size="small" type="primary">查看储值卡</el-button>
          </template> -->
          <el-descriptions-item
            label="可用储值卡数"
            :label-style="{ 'font-size': '16px' }"
          >
            <el-button style="font-size: 20px" type="text" @click="storedCard">
              {{ dataList.customer_prepaid.customer_prepaid_count }}
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item
            label="余额(元)"
            :label-style="{ 'font-size': '16px' }"
          >
            <el-button style="font-size: 20px" type="text" @click="balance">
              {{ dataList.customer_prepaid.customer_prepaid_balance }}
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item
            label="可用优惠卷/码"
            :label-style="{ 'font-size': '16px' }"
          >
            <el-button style="font-size: 20px" type="text" @click="discount">
              {{ dataList.customer_coupon.customer_coupon_count }}
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <el-descriptions
          class="margin-top"
          :colon="false"
          :column="6"
          direction="vertical"
          title="交易统计"
        >
          <template slot="extra">
            <el-button size="small" type="primary" @click="order()">
              详情
            </el-button>
          </template>
          <el-descriptions-item
            label="累计消费金额(元)"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">
              {{ dataList.customer_order.customer_order_amount }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="累计消费订单数"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">
              {{ dataList.customer_order.customer_order_count }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="客单价(元)"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">
              {{ dataList.customer_order.customer_order_agv }}
            </div>
          </el-descriptions-item>
          <!-- <el-descriptions-item
            label="最近下单时间"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">{{}}</div>
          </el-descriptions-item> -->
          <el-descriptions-item
            label="累计退款金额(元)"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">
              {{ dataList.customer_order.customer_after_amount }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="累计退款订单数"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 20px">
              {{ dataList.customer_order.customer_after_count }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <div
        style="width: 110%; margin-left: -5%; height: 5px; background: #ebe9e9"
      ></div>
      <div style="margin-top: 20px">
        <el-descriptions :colon="false" :column="5" title="收货地址">
          <template slot="extra"></template>
          <el-descriptions-item
            label="收货人"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">张富兴</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="收货地址"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">山东省青岛市市北区</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="详细地址"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">敦化路178#</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="收获手机号"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 15px">888-888-888</div>
          </el-descriptions-item>
          <el-descriptions-item />
        </el-descriptions>
      </div> -->
    </div>
    <el-dialog
      :before-close="handleClose"
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div v-if="state == 0">修改客户</div>
      <div v-if="state == 1">
        <Pass :data-list="dataList" @showMain="showMain" />
      </div>
      <div v-if="state == 3">
        <StoredCards :cusid="cusid" />
      </div>
      <div v-if="state == 4">
        <StoredCards :cusid="cusid" />
      </div>
      <div v-if="state == 5">
        <Discounts :cusid="cusid" />
      </div>
      <div v-if="state == 2">
        <cumulativeOrders :cusid="cusid" />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { cusDetail } from '@/api/customer'
  import StoredCards from './storedCard.vue'
  import Discounts from './discount.vue'
  import cumulativeOrders from './cumulativeOrder.vue'
  import Pass from './pass.vue'

  export default {
    components: { StoredCards, Discounts, cumulativeOrders, Pass },
    props: {
      // reportgroupid: {
      //   type: Number,
      //   required: true,
      // },
      cusid: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        state: '', // 0 修改客户 1 添加地址 2 修改地址 3查看储值卡 4查看余额 5查看优惠卷
        title: '',
        dataList: {},
        statea: false,
        langs: JSON.parse(window.localStorage.getItem('lang')),
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      init() {
        const data = {
          cus_id: this.cusid,
        }
        const _this = this
        cusDetail(data).then((e) => {
          _this.dataList = e.data

          this.statea = true
        })
      },
      // 修改客户
      customer() {
        this.dialogVisible = true
        this.state = 0

        this.title = '修改客户'
      },
      // 添加地址
      address() {
        this.dialogVisible = true
        this.state = 1
        this.title = '添加地址'
      },
      // 修改地址
      modifyAddress() {
        this.dialogVisible = true
        this.state = 2
        this.title = '修改地址'
      },
      // 查看储值卡
      storedCard() {
        this.dialogVisible = true
        this.state = 3
        this.title = '查看储值卡'
      },
      // 查看余额
      balance() {
        this.dialogVisible = true
        this.state = 4
        this.title = '查看余额'
      },
      // 查看优惠卷
      discount() {
        this.dialogVisible = true
        this.state = 5
        this.title = '查看优惠卷'
      },
      // 转赠
      pass() {
        this.state = 1
        this.title = '转赠'
        this.dialogVisible = true
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      showMain() {
        this.dialogVisible = false
        this.init()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      order() {
        this.dialogVisible = true
        this.title = '订单记录'

        this.state = 2
      },
    },
  }
</script>

<style></style>
